<template>
  <div class="container">
    <div class="header">
      <van-nav-bar title="已接单详情" left-text="返回" left-arrow @click-left="onClickLeft" class="header"  />
    </div>
    <div class="content-wrapper">
      <div class="main-card">
        <div class="back-button" @click="router.back()">返回</div>
        <div class="card-title">订单介绍</div>
        
        <div class="form-item">
          <div class="item-label">简介：<span class="inline-content">{{ formData.task }}</span></div>
        </div>
        
        <div class="form-item">
          <div class="item-label">截止时间：<span class="inline-content">{{ formData.endTime }}</span></div>
        </div>
        
        <div class="form-item">
          <div class="item-label">联系方式：<span class="inline-content">{{ formData.contact }}</span></div>
        </div>
        
        <div class="form-item">
          <div class="item-label centered">详细描述</div>
          <div class="item-content description">{{ formData.content }}</div>
        </div>

        <div class="upload-section" v-if="fileList.length > 0">
          <div class="item-label centered">图片补充</div>
          <div class="image-gallery">
            <div class="image-item" v-for="(item, index) in fileList" :key="index">
              <img :src="item.url" alt="图片" />
            </div>
          </div>
        </div>
        
        <div class="submit-btn-container">
          <van-button round block class="submit-btn complete-btn" @click="handleComplete">
            完成订单
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()
const onClickLeft = () => history.back();
const taskId = ref('')
const formData = ref({
  task: '小程序开发',
  endTime: '2025年3月1日',
  content: '开发小程序，实现用户登录、注册、浏览商品、下单等功能。',
  contact: '微信：example123'
})

// 图片上传相关
const fileList = ref([
  {
    url: '/src/assets/avatar.jpg'
  }
])

onMounted(() => {
  taskId.value = route.query.id

  // 这里可以使用fetch或axios获取已接单详情
  // fetch(`your-api-url/accepted/${taskId.value}`)
  //   .then(response => response.json())
  //   .then(data => {
  //     formData.value = data
  //     // 如果有图片数据，可以设置fileList
  //     // if (data.images && data.images.length > 0) {
  //     //   fileList.value = data.images.map(img => ({
  //     //     url: img.url,
  //     //     isImage: true
  //     //   }))
  //     // }
  //   })
  //   .catch(error => console.error('Error fetching data:', error))
})

const handleComplete = () => {
  if (confirm('确定要完成此订单吗？')) {
    // 这里可以使用fetch或axios发送完成订单请求
    // fetch(`your-api-url/accepted/${taskId.value}/complete`, {
    //   method: 'PUT',
    //   headers: {
    //     'Authorization': `Bearer ${localStorage.getItem('token')}`,
    //     'Content-Type': 'application/json'
    //   }
    // })
    // .then(response => response.json())
    // .then(data => {
    //   showToast('订单已完成')
    //   router.back()
    // })
    // .catch(error => console.error('Error completing order:', error))

    showToast('订单已完成')
    router.back()
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #c9d6e8;
}

.header {
  background-color: #4050B5;
  text-align: center;
  font-size: 18px;
  
}

.title {
  color: #fff;
  text-align: center;
  font-size: 18px;
  margin: 0;
  letter-spacing: 10px;
}

.content-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px;
  flex: 1;
}

.main-card {
  width: 90%;
  background-color: #F7F7F7;
  border-radius: 30px;
  padding: 25px 20px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #4a5db7;
  color: white;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.card-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin: 15px 0 30px;
  letter-spacing: 5px;
}

.form-item {
  background-color: white;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.item-label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.item-content {
  font-size: 15px;
  color: #666;
  word-break: break-all;
}

.description {
  min-height: 80px;
  white-space: pre-wrap;
}

.upload-section {
  background-color: white;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  margin-top: 10px;
}

.image-item {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.submit-btn-container {
  margin-top: 25px;
}

.submit-btn {
  background-color: #4a5db7;
  border: none;
  color: white;
  font-size: 16px;
  font-weight: 500;
  height: 45px;
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(74, 93, 183, 0.3);
}

.complete-btn {
  background-color: #07c160;
  box-shadow: 0 4px 8px rgba(7, 193, 96, 0.3);
}

.inline-content {
  display: inline;
  font-weight: normal;
  color: #666;
}

.centered {
  text-align: center;
  width: 100%;
}
</style>